<template>
  <div class="dashboard-container">
    <!-- 欢迎信息 -->
    <div class="welcome-section">
      <div class="welcome-avatar">
        <el-avatar :size="40" :src="userAvatar">
          <el-icon><UserFilled /></el-icon>
        </el-avatar>
      </div>
      <div class="welcome-text">
        <h2>欢迎使用elmentui-plus-admin，{{ userInfo.name }}</h2>
      </div>
    </div>
    
    <div class="dashboard-main">
      <!-- 左侧主内容区 -->
      <div class="dashboard-content">
        <!-- 数据统计卡片 -->
        <div class="data-overview">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="data-card">
                <div class="card-content">
					<div class="card-value">{{ statisticsData.totalOrders }}</div>
                  <div class="card-title">总订单数</div>
                </div>
                <div class="card-icon blue">
                  <el-icon><Document /></el-icon>
                </div>
              </div>
            </el-col>
            
            <el-col :span="8">
              <div class="data-card">
                <div class="card-content">
				  <div class="card-value">{{ statisticsData.totalShipments }}</div>
                  <div class="card-title">总发货数</div>
                </div>
                <div class="card-icon green">
                  <el-icon><Sell /></el-icon>
                </div>
              </div>
            </el-col>
            
            <el-col :span="8">
              <div class="data-card">
                <div class="card-content">
					<div class="card-value">{{ statisticsData.orderDays }}<span class="percentage">%</span></div>
					<div class="card-title">订单统计日</div>
                </div>
                <div class="card-icon orange">
                  <el-icon><TrendCharts /></el-icon>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        
        <!-- 发货数据 -->
        <div class="shipment-data section-card">
          <div class="section-header">
            <h3>发货数据 (近7日)</h3>
            <el-button link type="primary" @click="viewMoreShipmentData">
              更多
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </div>
          
          <div class="shipment-chart" ref="shipmentChartRef"></div>
        </div>
        
        <!-- 今日订单和未完成订单 -->
        <el-row :gutter="20" class="bottom-row">
          <el-col :span="12">
            <div class="today-orders section-card">
              <div class="section-header">
                <h3>今日订单</h3>
                <el-button link type="primary" @click="viewMoreTodayOrders">
                  更多
                  <el-icon><ArrowRight /></el-icon>
                </el-button>
              </div>
              
              <el-table :data="todayOrders" stripe style="width: 100%">
                <el-table-column label="#" type="index" width="50" />
                <el-table-column prop="type" label="单据类型" />
                <el-table-column prop="count" label="订单数" />
                <el-table-column prop="pending" label="待作业数" />
              </el-table>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="pending-orders section-card">
              <div class="section-header">
                <h3>未完成订单</h3>
              </div>
              
              <div class="pie-chart" ref="pendingChartRef"></div>
            </div>
          </el-col>
        </el-row>
      </div>
      
      <!-- 右侧导航和数据区 -->
      <div class="dashboard-sidebar">
        <!-- 快捷导航和数据统计合并为一个卡片 -->
        <div class="sidebar-card quick-nav-stats">
          <div class="sidebar-section">
            <div class="sidebar-title">快捷导航</div>
            
            <div class="quick-nav-grid">
              <div v-for="(item, index) in quickNavs" :key="index" class="quick-nav-item">
                <router-link :to="item.path">
                  <div class="nav-icon-circle">
                    <el-icon>
                      <component :is="item.icon"></component>
                    </el-icon>
                  </div>
                  <div class="nav-label">{{ item.label }}</div>
                </router-link>
              </div>
            </div>
          </div>
          
          <div class="sidebar-divider"></div>
          
          <div class="sidebar-section">
            <div class="sidebar-title">数据统计</div>
            
            <div class="data-stats-grid">
              <div class="stats-item">
                <router-link to="/reports/inout">
                  <div class="stats-icon-circle">
                    <el-icon><DataLine /></el-icon>
                  </div>
                  <div class="stats-label">出入库明细</div>
                </router-link>
              </div>
              <div class="stats-item">
                <router-link to="/reports/inventory">
                  <div class="stats-icon-circle">
                    <el-icon><PieChart /></el-icon>
                  </div>
                  <div class="stats-label">库存报表</div>
                </router-link>
              </div>
              <div class="stats-item">
                <router-link to="/reports/ops">
                  <div class="stats-icon-circle">
                    <el-icon><Histogram /></el-icon>
                  </div>
                  <div class="stats-label">绩效管理</div>
                </router-link>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 公告模块 -->
        <div class="sidebar-card notice-card">
          <div class="sidebar-title">公告</div>
          
          <div class="notice-list">
            <div v-for="(notice, index) in noticeList" :key="index" class="notice-item">
              <div class="notice-tag" :class="notice.type">{{ notice.tagText }}</div>
              <div class="notice-content">{{ notice.content }}</div>
            </div>
          </div>
        </div>
        
        <!-- 帮助文档 -->
        <div class="sidebar-card help-card">
          <div class="sidebar-title">帮助文档</div>
          
          <div class="help-content">
            <div class="help-item">
              <el-icon><Document /></el-icon>
              <span>操作手册</span>
            </div>
            <div class="contact-item">
              <div class="contact-icon">
                <el-icon><Phone /></el-icon>
              </div>
              <div class="contact-info">
                <div class="contact-label">客服热线</div>
                <div class="contact-value">400-5456556</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import { getShipmentChartData, getPendingChartData } from '@/utils/chartData'

// 引入router
const router = useRouter()

// 用户信息
const userInfo = reactive({
  name: 'Administrators',
  role: '管理员'
})

// 用户头像
const userAvatar = ref('')

// 统计数据
const statisticsData = reactive({
  totalOrders: '135780',
  totalShipments: '123360',
  orderDays: '5'
})

// 快捷导航
const quickNavs = [
  { label: '商品查询', icon: 'Goods', path: '/inventory/goods' },
  { label: '订单查询', icon: 'Document', path: '/outbound/order' },
  { label: '收货入库', icon: 'Finished', path: '/inbound/receive' },
  { label: '库存查询', icon: 'Monitor', path: '/inventory/stock' },
  { label: '仓库配置', icon: 'SetUp', path: '/settings/warehouse' },
  { label: '货主对接', icon: 'User', path: '/partner/owner' },
]

// 今日订单
const todayOrders = [
  { type: '入库', count: 1563, pending: 13 },
  { type: '出库', count: 1563, pending: 13 },
  { type: '补货', count: 1563, pending: 13 },
  { type: '盘点', count: 1563, pending: 13 },
  { type: '补货', count: 1563, pending: 13 },
  { type: '盘点', count: 1563, pending: 13 },
]

// 公告
const announcements = [
  { type: 'warning', tagText: '重要', content: '新增内容尚未通过审核。' },
  { type: 'warning', tagText: '重要', content: '新增内容尚未通过审核。' },
  { type: 'info', tagText: '消息', content: '消息内容消息内容消息内容消息内容消息内容消息内容。' },
  { type: 'success', tagText: '通知', content: '通知内容通知内容通知内容。' },
  { type: 'info', tagText: '消息', content: '消息内容消息内容消息内容消息内容消息内容消息内容。' },
  { type: 'success', tagText: '通知', content: '通知内容通知内容通知内容。' },
]

// 右侧公告
const noticeList = [
  { type: 'warning', tagText: '重要', content: '新增内容尚未通过审核。' },
  { type: 'info', tagText: '消息', content: '消息内容消息内容消息内容。' },
  { type: 'success', tagText: '通知', content: '通知内容通知内容通知内容。' },
]

// 图表DOM引用
const shipmentChartRef = ref(null)
const pendingChartRef = ref(null)

// 图表实例
let shipmentChart = null
let pendingChart = null

// 初始化发货数据图表
const initShipmentChart = () => {
  if (!shipmentChartRef.value) return
  
  // 如果已存在实例，先销毁
  if (shipmentChart) {
    shipmentChart.dispose()
  }
  
  shipmentChart = echarts.init(shipmentChartRef.value)
  
  // 使用工具函数获取图表配置
  const option = getShipmentChartData()
  
  shipmentChart.setOption(option)
}

// 初始化未完成订单图表
const initPendingChart = () => {
  if (!pendingChartRef.value) return
  
  // 如果已存在实例，先销毁
  if (pendingChart) {
    pendingChart.dispose()
  }
  
  pendingChart = echarts.init(pendingChartRef.value)
  
  // 使用工具函数获取图表配置
  const option = getPendingChartData()
  
  pendingChart.setOption(option)
}

// 查看更多发货数据
const viewMoreShipmentData = () => {
  router.push('/reports/shipment')
}

// 查看更多今日订单
const viewMoreTodayOrders = () => {
  router.push('/outbound/order')
}

// 调整窗口大小时重绘图表
const handleResize = () => {
  shipmentChart && shipmentChart.resize()
  pendingChart && pendingChart.resize()
}

onMounted(() => {
  // 使用setTimeout确保DOM已经渲染完成
  setTimeout(() => {
    initShipmentChart()
    initPendingChart()
  }, 100)
  
  // 添加窗口大小改变监听
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  // 移除窗口大小改变监听
  window.removeEventListener('resize', handleResize)
  
  // 销毁图表实例
  shipmentChart && shipmentChart.dispose()
  pendingChart && pendingChart.dispose()
})
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding-bottom: 20px;
  min-height: calc(100vh - 80px); /* 减去可能的头部和页面间距 */
  display: flex;
  flex-direction: column;
}

.welcome-section {
  margin-bottom: 20px;
  padding: 12px 20px;
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  
  .welcome-avatar {
    margin-right: 15px;
  }
  
  .welcome-text h2 {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin: 0;
  }
}

.dashboard-main {
  display: flex;
  gap: 20px;
  align-items: stretch; /* 确保左右两侧高度一致 */
  flex: 1; /* 填充剩余空间 */
  margin: 0 auto;
  width: 100%; /* 使用100%宽度 */
  max-width: 100%; /* 移除最大宽度限制，让内容充满可用空间 */
}

.dashboard-content {
  flex: 1; /* 左侧内容区自适应填充剩余空间 */
  display: flex;
  flex-direction: column;
  min-width: 0; /* 防止flex项目溢出 */
  width: auto; /* 移除固定宽度计算 */
}

.dashboard-sidebar {
  width: 391px; /* 右侧固定宽度 */
  min-width: 391px; /* 确保最小宽度也是391px */
  flex-shrink: 0; /* 防止收缩 */
  display: flex;
  flex-direction: column;
  height: 100%; /* 确保高度充满父容器 */
}

.section-card, .sidebar-card {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 24px; /* 增加内边距 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  height: calc(100% - 20px); /* 减去margin-bottom */
  display: flex;
  flex-direction: column;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  
  h3 {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    position: relative;
    padding-left: 10px;
    margin: 0;
    
    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 16px;
      background-color: #0165FF;
      border-radius: 3px;
    }
  }
}

.sidebar-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 20px;
  position: relative;
  padding-left: 10px;
  
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    background-color: #0165FF;
    border-radius: 3px;
  }
}

.data-overview {
  margin-bottom: 20px;
  
  .data-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 24px 30px; /* 增加左右内边距 */
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    
    &:hover {
      transform: translateY(-5px);
    }
    
    .card-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .card-title {
        font-size: 15px;
        color: #909399;
        margin-top: 8px;
      }
      
      .card-value {
        font-size: 42px; /* 增大字体 */
        font-weight: bold;
        color: #303133;
        line-height: 1.2;
        
        .percentage {
          font-size: 16px;
          font-weight: normal;
          margin-left: 2px;
          color: #f56c6c;
        }
      }
    }
    
    .card-icon {
      width: 64px; /* 增大图标尺寸 */
      height: 64px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 32px; /* 增大图标字体 */
      
      &.blue {
        background-color: #0165FF;
      }
      
      &.green {
        background-color: #67c23a;
      }
      
      &.orange {
        background-color: #e6a23c;
      }
    }
  }
}

.quick-nav-grid, .data-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px; /* 增加间隔 */
}

.quick-nav-item, .stats-item {
  border-radius: 8px;
  padding: 15px 10px; /* 增加上下内边距 */
  text-align: center;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    background-color: #f5f7fa;
  }
  
  a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #606266;
    text-decoration: none;
  }
  
  .nav-icon-circle, .stats-icon-circle {
    width: 50px; /* 增大图标区域 */
    height: 50px;
    border-radius: 10px;
    background-color: #eefbff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    
    .el-icon {
      font-size: 24px; /* 增大图标 */
      color: #0165FF;
    }
  }
  
  .nav-label, .stats-label {
    font-size: 14px; /* 增大字体 */
    white-space: nowrap;
  }
}

.shipment-data {
  flex: 1;
  .shipment-chart {
    flex: 1;
    width: 100%;
    height: 380px;
  }
}

.today-orders, .pending-orders {
  height: 100%;
  
  .el-table {
    margin-top: 12px;
    flex: 1;
  }
}

.bottom-row {
  margin-bottom: 20px;
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 400px;
  
  .el-col {
    display: flex;
    flex-direction: column;
  }
}

.pie-chart {
  margin-top: 12px;
  flex: 1;
  width: 100%;
  min-height: 300px;
}

.announcement-list {
  .announcement-item {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #ebeef5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .announcement-tag {
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
      margin-right: 10px;
      white-space: nowrap;
      
      &.warning {
        background-color: #fef0f0;
        color: #f56c6c;
      }
      
      &.info {
        background-color: #e6f1fc;
        color: #1989fa;
      }
      
      &.success {
        background-color: #f0f9eb;
        color: #67c23a;
      }
    }
    
    .announcement-content {
      flex: 1;
      font-size: 14px;
      line-height: 1.5;
      color: #606266;
    }
  }
}

.notice-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  
  .notice-item {
    display: flex;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 10px;
    
    &:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }
    
    .notice-tag {
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
      margin-right: 10px;
      white-space: nowrap;
      
      &.warning {
        background-color: #fef0f0;
        color: #f56c6c;
      }
      
      &.info {
        background-color: #e6f1fc;
        color: #1989fa;
      }
      
      &.success {
        background-color: #f0f9eb;
        color: #67c23a;
      }
    }
    
    .notice-content {
      flex: 1;
      font-size: 13px;
      line-height: 1.5;
      color: #606266;
    }
  }
}

.help-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
  justify-content: space-between; /* 在容器内均匀分布元素 */
  
  .help-item, .contact-item {
    background-color: #f7f8fa;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    
    &:hover {
      background-color: #ecf5ff;
      transform: translateY(-5px);
    }
    
    .el-icon {
      color: #0165FF;
      font-size: 20px;
      margin-right: 10px;
    }
  }
  
  .contact-item {
    display: flex;
    align-items: center;
    
    .contact-icon {
      color: #0165FF;
      font-size: 20px;
      margin-right: 12px;
      
      .el-icon {
        margin-right: 0;
      }
    }
    
    .contact-info {
      .contact-label {
        font-size: 13px;
        color: #909399;
        margin-bottom: 2px;
      }
      
      .contact-value {
        font-weight: bold;
        color: #303133;
        font-size: 14px;
      }
    }
  }
}

.sidebar-divider {
  height: 1px;
  background-color: #ebeef5;
  margin: 20px 0;
}

// 确保在大屏幕上保持3列
@media (min-width: 1920px) {
  .dashboard-main {
    max-width: none; /* 移除最大宽度限制 */
  }
  
  .dashboard-content {
    width: auto; /* 移除固定宽度计算 */
  }
  
  .dashboard-sidebar {
    width: 391px;
    min-width: 391px;
  }
  
  .quick-nav-grid, .data-stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

// 响应式调整
@media (max-width: 1680px) {
  .dashboard-main {
    max-width: none;
  }
  
  .dashboard-content {
    width: auto; /* 自适应宽度 */
  }
  
  .dashboard-sidebar {
    width: 391px;
    min-width: 391px;
  }
}

@media (max-width: 1400px) {
  .dashboard-sidebar {
    width: 350px;
    min-width: 350px;
  }
}

@media (max-width: 1200px) {
  .dashboard-main {
    flex-direction: column;
  }
  
  .dashboard-sidebar {
    width: 100%;
    min-width: 100%;
  }
}

@media (max-width: 768px) {
  .quick-nav-grid, .data-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sidebar-card {
  display: flex;
  flex-direction: column;
  
  &.quick-nav-stats {
    flex: 0 0 auto; /* 根据内容确定高度 */
  }
  
  &.notice-card, &.help-card {
    flex: 1; /* 平均分配剩余空间 */
    min-height: 200px; /* 设置最小高度 */
  }
}

.sidebar-section {
  margin-bottom: 20px;
  
  &:last-child {
    margin-bottom: 0;
  }
}
</style>